<template>
	<div class="cityson">
		<div class="city-dw common">
			<p>定位/附近城市</p>
			<ul>
				<li>{{cityName}}</li>
			</ul>
		</div>
		<div class="city-rm common">
			<p>热门城市</p>
			<ul>
				<li v-for="item in hostlist" :key="item.code" @click="toHome(item.name)" :class="{'default' : show==item.name}">{{item.name}}</li>

			</ul>
		</div>
		<div class="city-A common" v-for="(by,index) in citylist" :key="index">
			<p>字母{{by.initial}}开头的城市</p>
			<ul>
				<li v-for="key in by.list" :key="key.name" @click="toHome(key.name)" :class="{'default' : show==key.name}">
					{{key.name}}
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';

	export default {
		name: 'Citys',
		data() {
			return {
				hostlist: [],
				citylist: [],
				show: this.cityName,
			}
		},
		mounted() {
			if (localStorage.city) {
				this.show = localStorage.city;
			}
		},
		computed: {
			...mapState(['cityName'])
		},
		methods: {
			toHome(cname) {
				this.show = cname;
				this.changeCity(cname);
				this.$router.push('/');
			},
			...mapMutations(['changeCity'])
		},
		created() {
			let that = this
			this.axios.get('/api/city.json').then((res) => {
				let data = res.data.data
				that.hostlist = data.hotCities
				that.citylist = data.city
			}).catch((error) => {
				console.log(error)
			});
		}

	}
</script>

<style scoped>
	.cityson .default {
		background-color: #FED101;
		color: white;
	}

	.city-dw p {
		height: 1rem;
		line-height: 1rem;
		color: gray;
		margin-left: 0.2rem;
	}

	.city-dw ul li {
		color: gray;
		text-align: center;
		line-height: 0.7rem;
		width: 2rem;
		height: 0.7rem;
		background-color: #e6e6e6;
		list-style: none;
		margin-left: 0.5rem;
		border-radius: 0.3rem;
	}

	.city-rm {
		margin-top: 0.2rem;
		overflow: hidden;
		width: 100%;

	}

	.city-A {
		width: 100%;
		overflow: hidden;
		margin-top: 0.2rem;
		/* border-top: 1px solid black; */
	}

	.city-rm p {
		height: 1rem;
		line-height: 1rem;
		color: gray;
		margin-left: 0.2rem;
	}

	.city-A p {
		float: none;
		display: block;
		line-height: 1rem;
		height: 1rem;
		color: gray;
		margin-left: 0.2rem;
	}

	.city-rm ul li,
	.city-A ul li {
		float: left;
		color: gray;
		text-align: center;
		line-height: 1rem;
		width: 2.5rem;
		height: 1rem;
		background-color: #e6e6e6;
		list-style: none;
		margin-left: 0.5rem;
		border-radius: 0.3rem;
		margin-bottom: 0.2rem;
	}
</style>
